<template>
	<view class="goodsItem">
		<view class="goodsImgBox">
			<van-image width="160rpx" height="160rpx" fit="cover" radius="8rpx" class="goodsItemImg"
				src="https://tse1-mm.cn.bing.net/th/id/R-C.54fd04f18a37dfdefa4394d4c02a6dc9?rik=qLD75OTCrOQB7w&riu=http%3a%2f%2fscimg.jianbihuadq.com%2ftouxiang%2f202004%2f202004012005566.jpg&ehk=OxGJEnMT%2bMlXcavYEQS0L8I%2bucjuQbVoGsP5a3xaJPQ%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
				use-loading-slot lazy-load></van-image>
			<view class="goodsImgZaiShou">
				在售
			</view>
			<!-- <view class="goodsImgXiaJia">
				<view>已下架</view>
			</view> -->
		</view>
		<view class="goodsItemContent">
			<view class="goodsItemContentBox1">
				<text class="goodsTitle">全新 华为手机P30 暗夜紫</text>
				<view>
					<text class="browseNum">浏览量：9999</text>
					<text class="issueTime">发布时间：2022-05-21</text>
				</view>
				<text class="price">￥9999</text>
				<view class="gengduo" @click="showGengDuo">
					<van-image width="8rpx" height="36rpx" fit="cover" src="/static/images/gengduo.svg" use-loading-slot
						lazy-load></van-image>
				</view>
				<view v-show="gengDuoState" class="gengDuo">
					<view class="gengDuoBox">
						<view class="gengDuoBoxItem" @click="editGoods">修改商品</view>
						<view class="gengDuoBoxItem" @click="downGoods">下架商品</view>
						<view class="gengDuoBoxItem" @click="delGoods">删除</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			goodsObj: {
				type: Object,
				default: {}
			}
		},
		name: "goods-item",
		data() {
			return {
				gengDuoState: false
			};
		},
		methods: {
			// 显示更多
			showGengDuo() {
				this.gengDuoState = !this.gengDuoState
			},
			// 修改商品
			editGoods(){
				console.log("修改商品")
			},
			// 下架商品
			downGoods(){
				console.log("下架商品")
			},
			// 删除商品
			delGoods(){
				console.log("删除商品")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goodsItem {
		border-radius: 16upx;
		padding: 32upx 32upx 28upx 32upx;
		box-sizing: border-box;
		background: #ffffff;
		display: flex;
		
		// 图片区域
		.goodsImgBox {
			position: relative;
			overflow: hidden;
			height: 156upx;
			border-radius: 8upx;

			.goodsImgZaiShou {
				position: absolute;
				bottom: 0upx;
				right: 0upx;
				background: #3FD3D1;
				color: #ffffff;
				padding: 4upx 5upx;
				font-size: 16upx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}
			
			.goodsImgXiaJia{
				position: absolute;
				left: 0upx;
				top: 0upx;
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.5);
				display: flex;
				justify-content: center;
				align-items: center;
				
				view{
					width: 96upx;
					height: 96upx;
					background:rgba(0, 0, 0, 0.6);
					font-size: 24upx;
					border-radius: 50%;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.goodsItemContent {
			margin-left: 16upx;
			width: calc(100% - 160upx - 16upx);
			position: relative;

			text {
				display: block;
			}

			.goodsItemContentBox1 {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}

			.goodsTitle {
				font-size: 32upx;
				font-weight: bold;
			}

			.browseNum {
				color: #666666;
				font-size: 20upx;
			}

			.issueTime {
				color: #666666;
				font-size: 20upx;
				margin-top: 12upx;
			}

			.price {
				color: #3FD3D1;
				font-size: 32upx;
				font-weight: bold;
				position: absolute;
				right: 0upx;
				bottom: 10upx;
			}

			.gengduo {
				color: #cccccc;
				position: absolute;
				right: 0upx;
				top: 10upx;
				padding-left: 40upx;
			}
			
			.gengDuo{
				position: absolute;
				right: -32upx;
				top: calc(40upx + 36rpx);
				z-index: 999;
			}
			
			.gengDuoBox {
				width: 240upx;
				box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
				border-radius: 8upx;
				background: #ffffff;
				display: flex;
				flex-direction: column;
				padding: 8upx;
				box-sizing: border-box;

				.gengDuoBoxItem {
					color: #666666;
					font-size: 24upx;
					font-weight: bold;
					padding: 32upx;
					border-bottom: 1px solid #EEF2F4;

					&:last-child {
						border-bottom: 0px solid #EEF2F4;
					}
				}
				
				::before {
					position: absolute;
					top: -10upx;
					right: 30upx;
					content: '';
					width: 20upx;
					height: 20upx;
					background: #fff;
					transform: rotate(135deg);
					box-shadow: 2upx -4upx 10upx rgba(0, 0, 0, .2);
				}
				
				::after {
					position: absolute;
					top: 0upx;
					right: 15upx;
					content: '';
					width: 60upx;
					height: 40upx;
					background: #fff;
				}
				
			}
		}
	}
</style>
